<template>
<div>
    <h1>商品规格</h1>
    <el-button class="filter-item"  icon="el-icon-edit" @click="handleCreate">
        {{ $t('table.add') }}
      </el-button>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="规格id"
      width="180">
      <template slot-scope="scope">
        <span>{{scope.row.id}}</span>
      </template>
    </el-table-column>
    
    <el-table-column
      label="规格名称"
      width="180">
      <template slot-scope="scope">
        <span>{{scope.row.commodSpeciName}}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="规格类型"
      width="180">
      <template slot-scope="scope">
        <span>{{scope.row.commodSpeciOrder}}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="状态"
      width="180">
      <template slot-scope="scope">
        <span>{{scope.row.commodSpeciDisplay}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="商品id"
      width="180">
      <template slot-scope="scope">
        <span>{{scope.row.commodId}}</span>
      </template>
    </el-table-column>



    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog title="规格添加" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="规格内容" prop="commodSpeciName" >
          <el-input  v-model="temp.commodSpeciName"  />
        </el-form-item>
        
        <el-form-item label="状态" prop="commodSpeciDisplay">
          <el-input type="number" v-model="temp.commodSpeciDisplay" />
        </el-form-item>

        <el-form-item label="商品选择" prop="commodId">
          
           <el-select
      v-model="temp.commodId"
      placeholder="请选择商品"
      :style="{width:'100%'}">
       <el-option
      v-for="(item,index) in optionsCom"
      :key="index"
      :label="item.commodityName"
      :value="item.id"
      >
      </el-option>
      </el-select>
        </el-form-item>
        
        <el-form-item label="规格sku" prop="commodSpeciOrder">
<div class="hello">
    <SpecificaChild v-for="(item,index) in items"
      :key="index"
      :index="index"
      :items="items"
      :student="student"
      ref="Specificachild"
      @deleteIndex="del"
      @uploadData="getData">
    </SpecificaChild>
    <el-button @click="AddDiv">添加sku</el-button> 
  </div>
 </el-form-item>
      

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button type="primary" @click="getData">
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>
 </div> 
</template>

<script>
import SpecificaChild from './SpecificaChild.vue'
import { fetchList1,createArticle} from '@/api/Specifica'
import { fetchList } from '@/api/lb'

  export default {

    data() {
      return {
        student:{},
       stus:{},
        items: [{}],
      dataRec: [],
        counter:[],
        optionsCom:[],
        dialogFormVisible:false,
        temp:{},
        tableData: [],
        listQuery:{
          IsDeleted:1
        }
      }
    },
    components: {
    SpecificaChild
  },
    created()
    {
     this.GetList();
    },
    methods: {
      GetList()
      {
fetchList1(this.listQuery).then(response => {
        console.log(response)
        this.tableData = response.items;
      })
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
    handleCreate() {   
        fetchList(this.listQuery).then(res => {

            this.optionsCom=res.items;
            console.log(res);
      this.dialogFormVisible = true;
          })
    },
    headCreate()
      {
        
      },
      AddDiv()
      {
        this.items.push({name: '', age: ''})
      },del: function (index) {
      //  not allow to delete the first
      this.items.splice(index,index+1);
      if (index !== 0) {
        this.items.splice(index, 1);
        console.log('deleted:', JSON.stringify(this.items))
      }
    },
    //  get the data from child
    getData: function (val) {
console.log(this.student);
      let index = val.index
      this.items[index] = val.data;
      console.log(this.items);
      var k=[];
      k=this.items;
this.temp.commodSpeciOrder=this.items[0].name;
this.temp.commodSpeciDisplay=parseInt(this.items.length);

console.log(this.temp);

createArticle(this.temp).then(() => {
            this.items[0].name="";
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })


      

    }
    }
  }
</script>